<template>
  <div class="level">
    <div class="level_load" v-if="levelloadShow">
      <van-loading color="#1989fa" size="80" :vertical="true" class="level_load_load" />
    </div>
    <header_ title="我的等级" :pathName="this.$store.state" background="#ffffff" color="#000000" image_="0" size="4.8vw" />
    <div class="level_top">
      <div :class="topShow ? 'top1' : 'top2'" @click="topChangeClick1">
        财富等级
      </div>
      <div :class="topShow ? 'top2' : 'top1'" @click="topChangeClick2">
        魅力等级
      </div>
    </div>
    <div class="invitation" v-if="guildInvite.show">
      <div v-if="guildInvite.status == '0'" :id="animation?'animation':''">
        <div class="in_center">
          <span>{{ guildInvite.nickname }}</span>
          <span>邀请你加入公会</span>
          <span>{{ guildInvite.guildName }}</span>
        </div>
        <div class="btn_in" v-if="guildInvite.status == '0'">
          <button type="button" @click="btn_agin(1)">同意</button>
          <button type="button" @click="btn_agin(2)">拒绝</button>
        </div>
      </div>
      <div v-if="guildInvite.status == '1'" class="join_" id="animation2">
        <div class="in_tex2">
          <span>你已成功加入公会</span>
          <span>{{ guildInvite.guildName }}</span>
        </div>
      </div>
    </div>
    <div class="level_info">
      <div>
        <img :src="userInfo.headPic" />
        <p>{{ userInfo.nickName }}</p>
        <img :src="userInfo.levelPic" v-show="topShow" />
        <img :src="userInfo.charmLevelPic" v-show="!topShow" />
        <div class="level_rich_speed" v-if="topShow">
          <div>{{ userInfo.level }}</div>
          <div>
            <van-progress :percentage="parseFloat(userInfo.nextLevelPercent) || 0" class="speed_cl"
              pivot-color="#F31029" color="linear-gradient(135deg, #F32A7A, #F31029)" :show-pivot="false"
              stroke-width="1.6vw" />
            <div class="progress_niu" :style="niuleft">
              <div></div>
            </div>
          </div>
          <div>{{ userInfo.level + 1 }}</div>
        </div>
        <div class="level_rich_speed" v-else>
          <div>{{ userInfo.charmLevel }}</div>
          <div>
            <van-progress :percentage="parseFloat(userInfo.nextCharmLevelPercent) || 0" class="speed_cl"
              pivot-color="#F70891" color="linear-gradient(270deg, #D905FA, #F70891)" :show-pivot="false"
              stroke-width="1.6vw" />
            <div class="progress_niu" :style="niuleft">
              <div></div>
            </div>
          </div>
          <div>{{ userInfo.charmLevel + 1 }}</div>
        </div>
        <p v-show="topShow">
          当前财富等级<span>{{ userInfo.level }}</span>级 还差<span>{{ userInfo.nextLevel }}</span>经验升级
        </p>
        <p v-show="!topShow">
          当前魅力等级<span>{{ userInfo.charmLevel }}</span>级 还差<span>{{ userInfo.nextCharmLevel }}</span>经验升级
        </p>
      </div>
    </div>
    <ul class="level_rich" v-if="topShow">
      <li>
        <div>会员等级</div>
        <div>勋章</div>
        <div>所需经验</div>
      </li>
      <li v-for="(item, index) in richList" :key="index">
        <div>{{ item.level_name }}</div>
        <div><img :src="item.icon" /></div>
        <div>{{ item.amount }}</div>
      </li>
    </ul>
    <ul class="level_rich" v-else>
      <li>
        <div>会员等级</div>
        <div>勋章</div>
        <div>所需魅力值</div>
      </li>
      <li v-for="(item, index) in charmList" :key="index">
        <div>{{ item.level_name }}</div>
        <div><img :src="item.icon" /></div>
        <div>{{ item.amount }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
  import header_ from "../../components/header_";
  import md5 from "js-md5";
  import qs from "qs";
  import {
    Toast
  } from "vant";
  // import level1 from "../../public/img/level/level1.png";
  // import level11 from "../../public/img/level/level11.png";
  // import level21 from "../../public/img/level/level21.png";
  // import level31 from "../../public/img/level/level31.png";
  // import level41 from "../../public/img/level/level41.png";
  // import level51 from "../../public/img/level/level51.png";
  // import level61 from "../../public/img/level/level61.png";
  // import level71 from "../../public/img/level/level71.png";
  // import level81 from "../../public/img/level/level81.png";
  // import level86 from "../../public/img/level/level86.png";
  // import level91 from "../../public/img/level/level91.png";
  // import level96 from "../../public/img/level/level96.png";
  // import charm1 from "../../public/img/level/charm1.png";
  // import charm11 from "../../public/img/level/charm11.png";
  // import charm21 from "../../public/img/level/charm21.png";
  // import charm31 from "../../public/img/level/charm31.png";
  // import charm41 from "../../public/img/level/charm41.png";
  // import charm51 from "../../public/img/level/charm51.png";
  // import charm61 from "../../public/img/level/charm61.png";
  // import charm71 from "../../public/img/level/charm71.png";
  // import charm81 from "../../public/img/level/charm81.png";
  // import charm86 from "../../public/img/level/charm86.png";
  // import charm91 from "../../public/img/level/charm91.png";
  // import charm96 from "../../public/img/level/charm96.png";
  export default {
    data() {
      return {
        animation: false,
        guildInvite: {},
        // richList: [{
        //     level: "Lv.1-Lv.10",
        //     img: level1,
        //     num: "0-100000",
        //   },
        //   {
        //     level: "Lv.11-Lv.20",
        //     img: level11,
        //     num: "140000-500000",
        //   },
        //   {
        //     level: "Lv.21-Lv.30",
        //     img: level21,
        //     num: "550000-1000000",
        //   },
        //   {
        //     level: "Lv.31-Lv.40",
        //     img: level31,
        //     num: "1200000-3000000",
        //   },
        //   {
        //     level: "Lv.41-Lv.50",
        //     img: level41,
        //     num: "3500000-8000000",
        //   },
        //   {
        //     level: "Lv.51-Lv.60",
        //     img: level51,
        //     num: "9200000-20000000",
        //   },
        //   {
        //     level: "Lv.61-Lv.70",
        //     img: level61,
        //     num: "23000000-50000000",
        //   },
        //   {
        //     level: "Lv.71-Lv.80",
        //     img: level71,
        //     num: "55000000-100000000",
        //   },
        // ],
        // charmList: [{
        //     level: "Lv.1-Lv.10",
        //     img: charm1,
        //     num: "0-80000",
        //   },
        //   {
        //     level: "Lv.11-Lv.20",
        //     img: charm11,
        //     num: "100000-2000000",
        //   },
        //   {
        //     level: "Lv.21-Lv.30",
        //     img: charm21,
        //     num: "2800000-10000000",
        //   },
        //   {
        //     level: "Lv.31-Lv.40",
        //     img: charm31,
        //     num: "11000000-20000000",
        //   },
        //   {
        //     level: "Lv.41-Lv.50",
        //     img: charm41,
        //     num: "23000000-50000000",
        //   },
        //   {
        //     level: "Lv.51-Lv.60",
        //     img: charm51,
        //     num: "55000000-100000000",
        //   },
        //   {
        //     level: "Lv.61-Lv.70",
        //     img: charm61,
        //     num: "110000000-200000000",
        //   },
        //   {
        //     level: "Lv.71-Lv.80",
        //     img: charm71,
        //     num: "210000000-300000000",
        //   },
        //   {
        //     level: "Lv.81-Lv.85",
        //     img: charm81,
        //     num: "320000000-400000000",
        //   },
        //   {
        //     level: "Lv.86-Lv.90",
        //     img: charm86,
        //     num: "420000000-500000000",
        //   },
        //   {
        //     level: "Lv.91-Lv.95",
        //     img: charm91,
        //     num: "550000000-750000000",
        //   },
        //   {
        //     level: "Lv.96-Lv.100",
        //     img: charm96,
        //     num: "800000000-1000000000",
        //   },
        // ],
        richList:[],
        charmList:[],
        topShow: true,
        richprogress: 50,
        charmprogress: 50,
        userInfo: {},
        levelloadShow: false,
        niuleft: "0",
      };
    },
    components: {
      header_,
    },
    created() {
      this.levepage();
    },
    methods: {
      btn_agin(type) {
        this.animation = true
        let arys = {
          type: type,
        }; //参数
        let url = "/user/guildInviteConfirm";
        this.$.encryption2(arys, url).then((res) => {
          console.log(res);
          if (res.data.status == 0) {
            this.levepage()
          } else {
            this.guildInvite.show = 0
            Toast(res.data.text)
          }
        });
      },
      levepage() {
        let arys = {}; //参数
        let url = "/user/levelpage";
        this.$.encryption2(arys, url).then((res) => {
          this.userInfo = res.data.result;
          if (res.data.status == 0) {

            this.richList = res.data.result.levelList;
            this.charmList = res.data.result.charmlevelList;
            this.guildInvite = res.data.result.guildInvite;
        
            this.levelloadShow = false;
            this.niuleft =
              "top: 0.65vw;position: absolute;left:" +
              res.data.result.nextLevelPercent * 0.01 * 48 +
              "vw";
          }
        });
      },
      topChangeClick1() {
        this.topShow = true;
        this.niuleft =
          "top: 0.65vw;position: absolute;left:" +
          this.userInfo.nextLevelPercent * 0.01 * 48 +
          "vw";
      },
      topChangeClick2() {
        this.topShow = false;
        this.niuleft =
          "top: 0.65vw;position: absolute;left:" +
          this.userInfo.nextCharmLevelPercent * 0.01 * 48 +
          "vw";
      },
    },
  };
</script>
<style scoped>
  .header_ {
    position: fixed;
    width: 100vw;
    height: 10vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 4.4vw;
    font-family: PingFangSC-Medium, PingFang SC;
    background: #fff;
  }

  .header_>div:nth-of-type(1) {
    width: 20vw;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .header_>div:nth-of-type(3) {
    width: 20vw;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .header_>div:nth-of-type(1) img {
    transform: rotate(180deg);
    width: 3vw;
    height: 4vw;
  }

  .level {
    width: 100vw;
    overflow: auto;
    background: url("../../public/img/level/bg.png") no-repeat;
    background-size: 100%;
    background-position-y: -3.5vw;
  }

  .level_load {
    width: 100vw;
    height: 100vh;
  }

  .level_load_load {
    margin-top: 40vh;
  }

  ::-webkit-scrollbar {
    width: 0 !important;
  }

  ::-webkit-scrollbar {
    width: 0 !important;
    height: 0;
  }


  #animation {
    animation: fadeOutRightBig 1s .2s ease both;
  }

  #animation2 {
    animation: fadeOutRightBig2 1s .2s ease both;
  }

  @keyframes fadeOutRightBig {
    0% {
      opacity: 1;
      transform: translateX(0)
    }

    100% {
      opacity: 0;
      transform: translateX(2000px)
    }
  }

  @keyframes fadeOutRightBig2 {
    0% {
      opacity: 0;
      transform: translateX(2000px)
    }

    100% {
      opacity: 1;
      transform: translateX(0)
    }
  }

  .level_top {
    width: 49.3vw;
    margin-left: 25.35vw;
    height: 9.1vw;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4.55vw;
    /* margin-top: 5.1vw; */
    margin-top: 26.6vw;
    display: flex;
    justify-content: space-around;
  }

  .level_top>div {
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    line-height: 7.5vw;
    border-radius: 3.75vw;
    height: 7.5vw;
    margin-top: 0.8vw;
    width: 22.7vw;
    text-align: center;
    position: relative;
    font-size: 3.7vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
  }

  .invitation {
    position: absolute!important;;
    right: 0!important;
    display: flex;
    flex-direction: column;
    z-index: 99;
    background: #fe9e92;
    border-radius: 5px 0 0 5px;
  }

  .join_ {
    display: flex;
    align-items: center;
  }

  .in_center {
    display: flex;
    margin-top: 2.5vw;
    margin-bottom: 2.5vw;
    font-size: 3.2vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
  }

  .in_tex2 {
    display: flex;
    margin: 2.5vw;
    font-size: 3.2vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
  }

  .in_tex2>span:nth-of-type(2) {
    margin-left: 0.625rem;
    padding-right: 0.25rem;
    padding-right: 0.25rem;
  }

  .in_center>span:nth-of-type(1) {
    margin-left: 0.625rem;
    padding-right: 0.25rem;
  }

  .in_center>span:nth-of-type(3) {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .btn_in {
    display: flex;
    justify-content: center;
    margin-bottom: 4px;
  }

  .btn_in>button {
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    padding: 2px 4px;
    font-size: 12px;
    background: #fff;
    margin: 0 0.25rem;
  }

  .top1 {
    background: white;
    color: #ff949f;
  }

  .top2 {
    color: #ffffff;
  }

  .level_top>div>span {
    display: block;
    position: absolute;
    bottom: 0;
    width: 5.1vw;
    height: 1vw;
    background: #9875fb;
    border-radius: 0.5vw;
    left: 21.2vw;
  }

  .level_info {
    width: 92vw;
    margin-left: 4vw;
    height: 45.1vw;
    background: rgba(255, 255, 255, 0.33);
    border-radius: 4.8vw;
    margin-top: 12.8vw;
    box-sizing: border-box;
    padding-top: 1.8vw;
  }

  .level_info>div {
    width: 88vw;
    margin-left: 2vw;
    height: 41.3vw;
    text-align: center;
    background: #ffffff;
    box-shadow: 0 0 2.7vw 0 rgba(251, 166, 203, 0.2);
    border-radius: 4.3vw;
    position: relative;
    box-sizing: border-box;
    padding-top: 9.3vw;
  }

  .level_info>div>img:nth-of-type(1) {
    width: 17.3vw;
    height: 17.3vw;
    border-radius: 50%;
    position: absolute;
    top: -10.7vw;
    left: 50%;
    margin-left: -8.65vw;
  }

  .level_info>div>p:nth-of-type(1) {
    font-size: 4.3vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 4.3vw;
  }

  .level_info>div>img:nth-of-type(2),
  .level_info>div>img:nth-of-type(3) {
    height: 9.3vw;
    margin-top: 2.15vw;
  }

  .level_rich_speed {
    display: flex;
    justify-content: space-between;
    width: 61.9vw;
    margin-left: 13.05vw;
    margin-top: 2.1vw;
    height: 4.5vw;
  }

  .level_rich_speed>div {
    font-size: 3.2vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 4.5vw;
  }

  .level_rich_speed>div:nth-child(2) {
    width: 48vw;
    position: relative;
  }

  .progress_niu {
    width: 3.2vw;
    height: 3.2vw;
    border-radius: 50%;
    background: rgba(254, 128, 77, 0.69);
    position: absolute;
    top: 0.65vw;
  }

  .progress_niu>div {
    width: 1.6vw;
    height: 1.6vw;
    margin-left: 0.8vw;
    margin-top: 0.8vw;
    background: white;
  }

  .speed_cl {
    margin-top: 1.45vw;
  }

  .level_info>div>p:nth-of-type(2),
  .level_info>div>p:nth-of-type(3) {
    margin-top: 3.5vw;
    font-size: 3.2vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
  }

  .level_info>div>p:nth-of-type(2)>span,
  .level_info>div>p:nth-of-type(3)>span {
    color: #f5a623;
  }

  .level_rich {
    width: 88vw;
    margin-left: 6vw;
    overflow: hidden;
    margin-top: 8.5vw;
  }

  .level_rich>li {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    width: 88vw;
    text-align: center;
  }

  .level_rich>li>div {
    height: 9.3vw;
    line-height: 9.3vw;
    box-sizing: border-box;
    border-bottom: 1px solid #ececec;
    border-right: 1px solid #ececec;
    text-align: center;
  }

  .level_rich>li>div:nth-child(1) {
    width: 30vw;
    font-size: 3.5vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    border-left: 1px solid #ececec;
    color: #333333;
  }

  .level_rich>li>div:nth-child(2) {
    width: 20vw;
  }

  .level_rich>li>div:nth-child(2)>img {
    height: 9vw;
    /* margin-top: 2.1vw; */
  }

  .level_rich>li>div:nth-child(3) {
    width: 50.6vw;
    font-size: 3.5vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
  }

  .level_rich>li:nth-child(1) {
    width: 88vw;
    height: 10.4vw;
    background: #fff1eb;
    border-radius: 1.6vw 1.6vw 0 0;
  }

  .level_rich>li:nth-child(1)>div {
    border: none;
    height: 10.4vw;
    line-height: 10.4vw;
    font-size: 3.7vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #fe804d;
  }
</style>